<template>
  <div class="mineContainer">
    <div class="userInfoBox">
      <div class="userHeader">
        <van-image
          width="60"
          height="60"
          round
          :src="userInfo.photo"
        />
        <div class="userName">
          <span>{{userInfo.name}}</span>
          <van-button type="primary" size="mini">申请认证</van-button>
        </div>
      </div>
      <div class="userContent">
        <div class="dynamic">
          <span>{{userInfo.art_count}}</span>
          <span>动态</span>
        </div>
        <div class="attention">
          <span>{{userInfo.follow_count}}</span>
          <span>关注</span>
        </div>
        <div class="fans">
          <span>{{userInfo.fans_count}}</span>
          <span>粉丝</span>
        </div>
      </div>
    </div>
    <div class="box">
      <van-cell title="编辑资料" icon="edit" is-link @click="userEditFn" />
      <van-cell title="小新同学" icon="chat-o" is-link @click="linkChat" />
      <van-cell title="退出登录" icon="warning-o" is-link @click="logout" />
    </div>
  </div>
</template>

<script>
import { getUserInfoAPI } from '@/api'
export default {
  data () {
    return {
      userInfo: {}
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    // 获取用户个人信息
    async getUserInfo () {
      const res = await getUserInfoAPI()
      this.userInfo = res.data.data
    },
    // 编辑用户资料
    userEditFn () {
      this.$router.push('/user_edit')
    },
    // 退出登录
    logout () {
      this.$dialog.confirm({
        message: '确认退出登录？'
      }).then(async () => {
        localStorage.removeItem('token')
        this.$router.replace('/login')
      })
    },
    // 跳转聊天机器人
    linkChat () {
      this.$router.push('/chat')
    }
  }
}
</script>

<style lang="less" scoped>
  .userInfoBox {
    width: 100%;
    height: 220px;
    background: pink;
    padding: 50px 30px;
    box-sizing: border-box;
    .userHeader {
      display: flex;
      align-items: center;
      .van-image {
        border: 2px solid rgba(255, 255, 255, .8);
      }
      .userName {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        span {
          font-size: 14px;
          color: #fff;
        }
        .van-button {
          width: 56px;
          height: 16px;
          background-color: #fff;
          margin-top: 10px;
          border-color: #fff;
        }
        .van-button__text {
          font-size: 0.32rem;
          color: #123F6E;
        }
        .van-button--mini {
          padding: 1px 2px;
        }
      }
    }
  }
  .userContent {
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
    .dynamic,
    .attention,
    .fans {
      display: flex;
      flex-direction: column;
      align-items: center;
      span {
        font-size: 14px;
        color: #fff;
      }
    }
  }
  .box {
    .van-cell {
      border-bottom: 1px solid #f1f1f1;
    }
  }
</style>
